<template>
  <div>
    <el-container>
      <!-- 顶部状态栏 -->
      <div class="orientation">
        <i class="el-icon-location-outline">中国大陆</i
        ><a href="" class="loginButton">亲,请登录</a>
        <a href="" style="color: red" class="topButton">免费注册</a
        ><a href="" class="topButton">我的订单</a>
        <el-dropdown class="topButton">
          <div class="el-dropdown-link" style="color: black">
            我的<i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>我的关注</el-dropdown-item>
            <el-dropdown-item>我的足迹</el-dropdown-item>
            <el-dropdown-item>我的购物车</el-dropdown-item>
            <el-dropdown-item>我的优惠券</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 商城logo和搜索及购物车 -->
      <div class="top">
        <!-- Logo -->
        <a href="/" class="logo">
          <img src="../../assets/logo.png" alt="" />
        </a>
        <!-- 搜索框 -->
        <div class="search">
          <el-input
            placeholder="请输入内容"
            v-model="input"
            type="text"
            clearable
          >
            <el-button
              id="frame"
              slot="append"
              icon="el-icon-search"
              @click="search"
            ></el-button>
          </el-input>
          <el-badge class="shopping_cart">
            <el-button
              type="mini"
              style="
                color: #e1251b;
                font-size: 15px;
                background: rgba(255, 0, 0, 0);
              "
              icon="el-icon-shopping-cart-full"
              class="btn"
              @click="goshoppingcart"
              >我的购物车</el-button
            >
          </el-badge>
        </div>
      </div>
      <!-- 广告链接 -->
      <img src="../../assets/guangao.png" alt="" />
      <!-- 面包屑 -->
      <el-header style="height: 20px">
        <a href="/" class="Navigationindentation" style="margin-left: 10%"
          >首页</a
        >
        <label class="Navigationindentation">></label>
        <a href="" class="">个人信息</a>
        <label class="Navigationindentation">></label>
        <a href="" class="">我的订单</a></el-header
      >
      <!-- 内容主体结构 -->
      <el-card class="contentbody">
        <!-- 内容选项卡 -->
        <el-tabs
          v-model="activeName"
          type="card"
          style="width: 100%"
          :stretch="true"
          @tab-click="handleClick"
        >
          <el-tab-pane label="全部订单" name="Allorders">
            <!-- 标题头 -->
            <div>
              <label style="margin-left: 8%">商品</label>
              <label style="margin-left: 12%">订单编号</label>
              <label style="margin-left: 12%">订单日期</label>
              <label style="margin-left: 11%">单价</label>
              <label style="margin-left: 6%">数量</label>
              <label style="margin-left: 6%">小计</label>
              <label style="margin-left: 6%">状态</label>
              <label style="margin-left: 7%">操作</label>
            </div>
            <!-- 订单信息 -->
            <el-card v-for="n in Ordercontent" :key="n.id" class="OrderInfo">
              <!-- 商品标题加图片整体布局 -->
              <div class="Commoditytitlebody">
                <!-- 商品标题 -->
                <div class="Commoditytitle">
                  {{ n.productname }}
                </div>
                <!-- 商品图片 -->
                <img :src="n.img" alt="" class="Commodityimages" />
              </div>
              <!-- 订单号 -->
              <div class="ordernumber">
                <br /><br /><label class="ordernumberlabel">{{
                  n.ordernumber
                }}</label>
              </div>
              <!-- 订单时间 -->
              <div class="orderdate">
                <br /><br /><label class="orderdatelabel">{{
                  n.orderdate
                }}</label>
              </div>
              <!-- 订单价格 -->
              <div class="price">
                <br /><br /><label class="pricelabel">¥{{ n.price }}</label>
              </div>
              <!-- 订单数量 -->
              <div class="amount">
                <br /><br />
                <label class="amountlabel">{{ n.amount }}</label>
              </div>
              <!-- 订单小计 -->
              <div class="subtotal">
                <br /><br /><label class="subtotallabel"
                  >¥{{ n.subtotal }}</label
                >
              </div>
              <!-- 订单状态 -->
              <div class="state">
                <br /><br /><label class="statelabel">{{ n.state }}</label>
              </div>
              <!-- 订单操作 -->
              <div class="operation">
                <br />
                <button class="operationrecur">再来一单</button>
                <button class="operationdelete">删除</button>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="待支付" name="unpaid">
            <!-- 标题头 -->
            <div>
              <label style="margin-left: 8%">商品</label>
              <label style="margin-left: 12%">订单编号</label>
              <label style="margin-left: 12%">订单日期</label>
              <label style="margin-left: 11%">单价</label>
              <label style="margin-left: 6%">数量</label>
              <label style="margin-left: 6%">小计</label>
              <label style="margin-left: 6%">状态</label>
              <label style="margin-left: 7%">操作</label>
            </div>
            <!-- 订单信息 -->
            <el-card v-for="n in Ordercontent1" :key="n.id" class="OrderInfo">
              <!-- 商品标题加图片整体布局 -->
              <div class="Commoditytitlebody">
                <!-- 商品标题 -->
                <div class="Commoditytitle">
                  {{ n.productname }}
                </div>
                <!-- 商品图片 -->
                <img :src="n.img" alt="" class="Commodityimages" />
              </div>
              <!-- 订单号 -->
              <div class="ordernumber">
                <br /><br /><label class="ordernumberlabel">{{
                  n.ordernumber
                }}</label>
              </div>
              <!-- 订单时间 -->
              <div class="orderdate">
                <br /><br /><label class="orderdatelabel">{{
                  n.orderdate
                }}</label>
              </div>
              <!-- 订单价格 -->
              <div class="price">
                <br /><br /><label class="pricelabel">¥{{ n.price }}</label>
              </div>
              <!-- 订单数量 -->
              <div class="amount">
                <br /><br />
                <label class="amountlabel">{{ n.amount }}</label>
              </div>
              <!-- 订单小计 -->
              <div class="subtotal">
                <br /><br /><label class="subtotallabel"
                  >¥{{ n.subtotal }}</label
                >
              </div>
              <!-- 订单状态 -->
              <div class="state">
                <br /><br /><label class="statelabel">{{ n.state }}</label>
              </div>
              <!-- 订单操作 -->
              <div class="operation">
                <br />
                <button class="operationrecur">去支付</button>
                <button class="operationdelete">取消订单</button>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="待收货" name="awaitReceiving">
            <!-- 标题头 -->
            <div>
              <label style="margin-left: 8%">商品</label>
              <label style="margin-left: 12%">订单编号</label>
              <label style="margin-left: 12%">订单日期</label>
              <label style="margin-left: 11%">单价</label>
              <label style="margin-left: 6%">数量</label>
              <label style="margin-left: 6%">小计</label>
              <label style="margin-left: 6%">状态</label>
              <label style="margin-left: 7%">操作</label>
            </div>
            <!-- 订单信息 -->
            <el-card v-for="n in Ordercontent2" :key="n.id" class="OrderInfo">
              <!-- 商品标题加图片整体布局 -->
              <div class="Commoditytitlebody">
                <!-- 商品标题 -->
                <div class="Commoditytitle">
                  {{ n.productname }}
                </div>
                <!-- 商品图片 -->
                <img :src="n.img" alt="" class="Commodityimages" />
              </div>
              <!-- 订单号 -->
              <div class="ordernumber">
                <br /><br /><label class="ordernumberlabel">{{
                  n.ordernumber
                }}</label>
              </div>
              <!-- 订单时间 -->
              <div class="orderdate">
                <br /><br /><label class="orderdatelabel">{{
                  n.orderdate
                }}</label>
              </div>
              <!-- 订单价格 -->
              <div class="price">
                <br /><br /><label class="pricelabel">¥{{ n.price }}</label>
              </div>
              <!-- 订单数量 -->
              <div class="amount">
                <br /><br />
                <label class="amountlabel">{{ n.amount }}</label>
              </div>
              <!-- 订单小计 -->
              <div class="subtotal">
                <br /><br /><label class="subtotallabel"
                  >¥{{ n.subtotal }}</label
                >
              </div>
              <!-- 订单状态 -->
              <div class="state">
                <br /><br /><label class="statelabel">{{ n.state }}</label>
              </div>
              <!-- 订单操作 -->
              <div class="operation">
                <br />
                <button class="operationrecur">确认收货</button>
                <button class="operationdelete">退货</button>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="待评价" name="awaitevaluate">
            <!-- 标题头 -->
            <div>
              <label style="margin-left: 8%">商品</label>
              <label style="margin-left: 12%">订单编号</label>
              <label style="margin-left: 12%">订单日期</label>
              <label style="margin-left: 11%">单价</label>
              <label style="margin-left: 6%">数量</label>
              <label style="margin-left: 6%">小计</label>
              <label style="margin-left: 6%">状态</label>
              <label style="margin-left: 7%">操作</label>
            </div>
            <!-- 订单信息 -->
            <el-card v-for="n in Ordercontent3" :key="n.id" class="OrderInfo">
              <!-- 商品标题加图片整体布局 -->
              <div class="Commoditytitlebody">
                <!-- 商品标题 -->
                <div class="Commoditytitle">
                  {{ n.productname }}
                </div>
                <!-- 商品图片 -->
                <img :src="n.img" alt="" class="Commodityimages" />
              </div>
              <!-- 订单号 -->
              <div class="ordernumber">
                <br /><br /><label class="ordernumberlabel">{{
                  n.ordernumber
                }}</label>
              </div>
              <!-- 订单时间 -->
              <div class="orderdate">
                <br /><br /><label class="orderdatelabel">{{
                  n.orderdate
                }}</label>
              </div>
              <!-- 订单价格 -->
              <div class="price">
                <br /><br /><label class="pricelabel">¥{{ n.price }}</label>
              </div>
              <!-- 订单数量 -->
              <div class="amount">
                <br /><br />
                <label class="amountlabel">{{ n.amount }}</label>
              </div>
              <!-- 订单小计 -->
              <div class="subtotal">
                <br /><br /><label class="subtotallabel"
                  >¥{{ n.subtotal }}</label
                >
              </div>
              <!-- 订单状态 -->
              <div class="state">
                <br /><br /><label class="statelabel">{{ n.state }}</label>
              </div>
              <!-- 订单操作 -->
              <div class="operation">
                <br />
                <button class="operationrecur">去评价</button>
                <button class="operationdelete">删除订单</button>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-container>
  </div>
</template>

<style scoped>
/* 顶部状态栏整体 */
.orientation {
  background-color: #e9eef3;
  width: 100%;
  padding-left: 10%;
}
/* 顶部我的下来菜单按钮 */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
/* a链接去下划线并将字体颜色变黑 */
a {
  text-decoration: none;
  color: black;
}
/* 将鼠标放到a链接变色 */
a:hover {
  text-decoration: none;
  color: red;
}
/* 登录按钮 */
.loginButton {
  margin-left: 40%;
}
/* 顶部除登录外的三个按钮 */
.topButton {
  margin-left: 4%;
}

/* 搜索部分整体 */
.search {
  margin-left: 35%;
  margin-top: 2%;
}
/* 搜索按钮 */
.el-icon-search {
  height: 40px;
  width: 70px;
  background-color: red;
}
/* 鼠标移到搜索按钮变色 */
.el-icon-search:hover {
  background-color: rgb(219, 29, 29);
}
/* 购物车按钮 */
.shoppingcar {
  height: 40px;
  width: 130px;
  margin-left: 13%;
  color: red;
  border: none;
  background-color: white;
}
/* 将鼠标移到购物车按钮边框变色 */
.shoppingcar:hover {
  border-style: solid;
  color: red;
  border-width: 1px;
}
/* 购物车图标大小 */
.el-icon-shopping-cart-full {
  margin-right: 10px;
}
/* 面包屑整体大小 */
.el-header {
  background-color: #ebedf0d7;
}
/* 面包屑内容间隔 */
.Navigationindentation {
  margin-left: 1%;
  margin-right: 1%;
}
/* 内容主体结构 */
.contentbody {
  /* background-color: rgba(221, 211, 211, 0.801); */
  width: 80%;
  margin-left: 10%;
  height: 2000px;
}
/* 订单信息 */
.OrderInfo {
  width: 100%;
  margin-top: 20px;
  height: 140px;
}
/* 商品标题加图片整体布局 */
.Commoditytitlebody {
  height: 100px;
  width: 20%;
  float: left;
}
/* 商品标题 */
.Commoditytitle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
}
/* 商品标题鼠标移动显示全部 */
.Commoditytitle:hover {
  width: 500%;
}
/* 商品图片 */
.Commodityimages {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-left: 20%;
}
/* 订单编号布局 */
.ordernumber {
  height: 100px;
  width: 10%;
  float: left;
}
/* 订单编号文本 */
.ordernumberlabel {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 订单日期布局 */
.orderdate {
  height: 100px;
  width: 15%;
  float: left;
  margin-left: 6%;
}
/* 订单布局文本 */
.orderdatelabel {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 价格布局 */
.price {
  height: 100px;
  width: 9%;
  float: left;
  margin-left: 3%;
}
/* 价格文本 */
.pricelabel {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 数量布局 */
.amount {
  height: 100px;
  width: 7%;
  float: left;
  margin-left: 1%;
}
/* 数量文本 */
.amountlabel {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 小计布局 */
.subtotal {
  height: 100px;
  width: 9%;
  float: left;
  margin-left: 1%;
}
/* 小计文本 */
.subtotallabel {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 状态布局 */
.state {
  height: 100px;
  width: 9%;
  float: left;
}
/* 状态文本 */
.statelabel {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 订单操作布局 */
.operation {
  height: 100px;
  width: 8%;
  float: left;
  margin-left: 2%;
}
/* 再来一单 */
.operationrecur {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 删除订单 */
.operationdelete {
  display: flex;
  justify-content: center;
  align-items: center;
  color: blue;
  background-color: white;
  border: none;
}
/* 鼠标经过删除字体和鼠标样式 */
.operationdelete:hover {
  color: red;
  cursor: pointer;
}

/* 头部 */
.top {
  height: 98px;
  margin-top: 15px;
}

/* Logo */
.logo {
  width: 190px;
  height: 80px;
  float: left;
  margin: 8px 0 0 160px;
}

/* 搜索框 */
.search {
  margin-left: 430px;
  line-height: 80px;
  margin-top: -1px;
  width: 600px;
}

/* 搜索按钮 */
#frame {
  background-color: #ff5000;
  font-size: 15px;
  border-radius: 1;
  color: #f5f5f5;
}

/* 购物车 */
.shopping_cart {
  margin-top: -160px;
  margin-left: 630px;
}
</style>

<script>
export default {
  data () {
    return {
      input: "",
      activeName: "Allorders",
      num: 1,
      Ordercontent: [
        {
          id: 1,
          productname:
            " Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能手机 小米 红米",
          img: require("../../assets/imgs/1.jpg"),
          ordernumber: "316464649888",
          orderdate: "2021-07-19 13:44:25",
          price: 99,
          amount: 1,
          subtotal: 99,
          state: "已完成",
        },
        {
          id: 2,
          productname:
            " Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能手机 小米 红米",
          img: require("../../assets/imgs/1.jpg"),
          ordernumber: "316464649888",
          orderdate: "2021-07-19 13:44:25",
          price: 99,
          amount: 1,
          subtotal: 99,
          state: "已完成",
        },
      ],
      Ordercontent1: [
        {
          id: 1,
          productname:
            " Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能手机 小米 红米",
          img: require("../../assets/imgs/1.jpg"),
          ordernumber: "316464649888",
          orderdate: "2021-07-19 13:44:25",
          price: 99,
          amount: 1,
          subtotal: 99,
          state: "待付款",
        },
        {
          id: 2,
          productname:
            " Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能手机 小米 红米",
          img: require("../../assets/imgs/1.jpg"),
          ordernumber: "316464649888",
          orderdate: "2021-07-19 13:44:25",
          price: 99,
          amount: 1,
          subtotal: 99,
          state: "待付款",
        },
      ],
      Ordercontent2: [
        {
          id: 1,
          productname:
            " Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能手机 小米 红米",
          img: require("../../assets/imgs/1.jpg"),
          ordernumber: "316464649888",
          orderdate: "2021-07-19 13:44:25",
          price: 99,
          amount: 1,
          subtotal: 99,
          state: "待收货",
        },
        {
          id: 2,
          productname:
            " Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能手机 小米 红米",
          img: require("../../assets/imgs/1.jpg"),
          ordernumber: "316464649888",
          orderdate: "2021-07-19 13:44:25",
          price: 99,
          amount: 1,
          subtotal: 99,
          state: "待收货",
        },
      ],
      Ordercontent3: [
        {
          id: 1,
          productname:
            " Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能手机 小米 红米",
          img: require("../../assets/imgs/1.jpg"),
          ordernumber: "316464649888",
          orderdate: "2021-07-19 13:44:25",
          price: 99,
          amount: 1,
          subtotal: 99,
          state: "带评价",
        },
        {
          id: 2,
          productname:
            " Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能手机 小米 红米",
          img: require("../../assets/imgs/1.jpg"),
          ordernumber: "316464649888",
          orderdate: "2021-07-19 13:44:25",
          price: 99,
          amount: 1,
          subtotal: 99,
          state: "待评价",
        },
      ],
    };
  },
  methods: {
    search() {
      this.$router.push("/search");
    },
    goshoppingcart() {
      this.$router.push("/shoppingcart");
    },
    handleClick () {
      console.log(this.activeName);
    },
  },
};
</script>